<template>
    <el-dialog :close-on-click-modal="isModelClose" :before-close="close" title="角色授权" :style="dialogStyle" v-if="isShowRoleDialog" :visible.sync="isShowRoleDialog">
        <div class="selectSysRoleTable">
            <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowTable" :rows="15" animated />
            <el-table v-if="isShowTable" :data="tableData" style="width: 100%" ref="roleTable">
                <el-table-column type="selection" label="序号">
                </el-table-column>
                <el-table-column prop="name" label="角色名称">
                </el-table-column>
                <el-table-column prop="roleType" label="角色类型">
                    <template slot-scope="scope">
                        {{getRoleType(scope.row)}}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,50,100, 200, 300, 400]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <div slot="footer" class="selectSysRoleFooter">
            <el-button type="primary" @click="saveRls()">确 定</el-button>
            <el-button @click="close">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script lang="ts">
    import { Component, Vue, Watch, Emit, Prop } from 'vue-property-decorator'
    import { Action, Getter } from 'vuex-class'
    import logo from '@/components/common/images/logo.png'
    import { namespace } from 'vuex-class';
    import * as _ from 'lodash';
    import AdminApiActions from '@/components/api/admin-api-actions';

    @Component({
        components: {}
    })
    export default class SysUser extends Vue {
        public tableData: Array < any >= new Array < any > ();
        @Prop() params: any;
        public scope: any = "";
        public total: Number = 0;
        public isShowTable: boolean = false;
        public pageSize: number = 10;
        public curPage: Number = 1;
        public isModelClose: boolean = false;
        public isShowRoleDialog: boolean = true;
        public dialogStyle: any = {};
        async created() {
            await this.initTableData();
            await this.initCheckData();
        }
        public async initCheckData() {
            let userRoleList: any = await AdminApiActions.getUserRoleRls({ userId: this.params.userId });
            this.$nextTick(() => {
                userRoleList.data.forEach(item => {
                    let row: any = this.tableData.find(curRow => curRow.id == item.roleId);
                    (this.$refs.roleTable as any).toggleRowSelection(row);
                });
            })

        }
        @Watch("$route")
        public async routeChange(from: any, to: any) {
            this.isShowTable = false;
            await this.initTableData();
        }
        public async initTableData() {
            let result: any = await AdminApiActions.getSysRolePage({ name: "", pageInfo: { pageSize: this.pageSize, pageNum: this.curPage } });
            this.tableData = result.data.list;
            this.total = result.data.total;
            this.isShowTable = true;
        }
        public getRoleType(row: any) {
            if (row.roleType === "1") {
                return "菜单角色";
            }
            return "操作角色";
        }
        //每页数量改变
        public async handleSizeChange(pageSize: any) {
            this.isShowTable = false;
            this.pageSize = pageSize;
            await this.initTableData();
        }
        //页数改变
        public async handleCurrentChange(curPage: any) {
            this.isShowTable = false;
            this.curPage = curPage;
            await this.initTableData();
        }
        @Emit("close")
        public close() {

        }
        public async saveRls() {
            let roleTable: any = this.$refs.roleTable;
            let selectData: Array < any >= roleTable.selection;
            //添加之前先删除用户角色关系
            await AdminApiActions.deleteUserRoleRls({ userId: this.params.userId });
            let params: any = selectData.map(item => {
                return {
                    userId: this.params.userId,
                    roleId: item.id
                }
            });
            await AdminApiActions.addUserRoleRls(params);
            this.confirm();
        }
        @Emit("confirm")
        public async confirm() {

        }
    }
</script>
<style lang="less">
    .selectSysRoleTable {
        max-height: 450px !important;
        overflow: hidden;

        .el-table__body-wrapper {
            overflow-y: auto;
            height: calc(100% - 70px);
            max-height: 300px;
            min-height: 200px;
        }

        height: calc(100% - 60px);

        .el-table {
            height: calc(100% - 40px);
        }

        .el-pagination {
            margin-top: 12px;
        }

        .el-dialog__body {
            max-height: 350px !important;
            overflow: auto;
        }
    }

    .selectSysRoleFooter {
        display: flex;
        justify-content: center;
    }
</style>